<template>
    <div>
        <headers :head_title="head_title" />
        <main>
            <div class="box_head">
                <div class="box_intro">
                    <p><span class="details_css"></span><span>
                            <div v-for="item in doctorlist">
                                <div class="lik">
                                    <img :src="item.headPic" alt="" class="image">
                                    <div class="ak">
                                        {{ item.nickName }}
                                    </div>
                                </div>
                                <div class="title">
                                    {{ item.content }}
                                </div>
                            </div>
                        </span></p>
                    <div @click="dian">点击查看更多评论</div>
                    <div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import headers from '@/components/header.vue';
import { showDialog } from 'vant';
import { ref } from 'vue';
import axios from 'axios';
const head_title = '评论列表';
const doctorlist = ref([]);
const route = useRoute();
const data = doctorlist.value;
const doctorId = route.params.doctorId;
const getlist = () => {
    axios.get(`/health/user/inquiry/v1/findDoctorInfo?doctorId=` + doctorId).then((res) => {
        doctorlist.value = res.data.result.commentList;
    })
}
getlist()
const dian = () => {
    axios.get(`/health/user/inquiry/v1/findDoctorInfo?doctorId=` + doctorId).then((res) => {
        const newdata = res.data.result.commentList;
        doctorlist.value = [...doctorlist.value, ...newdata];
    })
    if(doctorlist.value.length===6){
        showDialog({ message: '没有更多评论了' });
    }
}
</script>

<style scoped lang="scss">
.title {
    margin-left: 5px;
    font-size: 14px;
}

.ak {
    width: 100px;
    height: 50px;
    line-height: 55px;
    margin-left: 10px;
    font-size: 13px;
}

.lik {
    display: flex;
}

.image {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-top: 5px;
}

.wen {
    text-align: center;
}

.jk {
    display: flex;
}

main {
    width: 90%; // 90% * 0.5
    margin: 12.5px auto; // 25px * 0.5
}

.box_head {
    width: 95%; // 95% * 0.5
    height: 50%;
    background: #fff;
    display: flex;
}

.box_intro {
    margin: 5px 0; // 10px * 0.5
}

.box_head>img {
    width: 150px; // 300px * 0.5
    height: 175px; // 350px * 0.5
    margin-right: 17.5px; // 35px * 0.5
    border: #ccc 0.5px solid; // 1px * 0.5
}

.uls>li {
    margin: 7.5px; // 15px * 0.5
    /* font-size: 24px; */
}

.uls>li img {
    width: 42.5px; // 85px * 0.5
}

.box_name {
    font-size: 17.5px; // 35px * 0.5
    margin: 12.5px;
    margin-left: 0;
}

.sst {
    font-size: 10px; // 20px * 0.5
    margin-right: 6px; // 12px * 0.5
}

.ccx>span {
    margin-right: 7.5px; // 15px * 0.5
}

// .details_css {
//     /* font-size: 34px; */
//     margin-right: 5px; // 10px * 0.5
//     border-left: 3px solid #368beb; // 6px * 0.5
// }

.details_text {
    // font-size: initial;
    font-size: 20px; // 15px * 0.5
}
</style>
